import { defineComponent, onMounted, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElDialog, ElInput, ElButton, ElIcon, ElMessage, ElSwitch } from 'element-plus'
import { EditPen } from '@element-plus/icons-vue'
import type { AlarmSetPropsType } from './typings'
import styles from './index.module.scss'

export default defineComponent({
  name: 'ConnectSet',
  props: ['visible', 'record'],
  emits: ['cancel'],
  setup(props: AlarmSetPropsType, { emit }) {
    const store = useStore()
    const router = useRouter()
    const state = reactive<any>({
      params: []
    })
    // 关闭弹框事件回调
    const handleCloseModal = () => {
      emit('cancel')
    }

    // 提交表单
    const handleSubmitForm = async () => {
      const { id } = router.currentRoute.value.query
      state.params.id = id
      const res = await store.dispatch('equipment/UpdateAlarmPut', state.params)
      if (res?.code === 200) {
        ElMessage({ type: 'success', message: '操作成功' })
        handleCloseModal()
      }
    }

    onMounted(() => {
      state.params = props.record
    })

    return () => {
      const { visible } = props
      return (
        <ElDialog
          title="警报参数"
          width={1400}
          modelValue={visible}
          closeOnClickModal={false} // 点遮罩层不关弹窗
          draggable // 可拖拽
          beforeClose={handleCloseModal}
          v-slots={{
            footer: () => (
              <>
                <ElButton type="primary" onClick={handleSubmitForm}>
                  <ElIcon>
                    <EditPen />
                  </ElIcon>
                  确定
                </ElButton>
                <ElButton onClick={handleCloseModal}>取消</ElButton>
              </>
            )
          }}
        >
          <table class={styles['table-form']} cellspacing={0} cellpadding={0}>
            <tr>
              <td>回路开关</td>
              <td>参数名称</td>
              <td>零火线属性</td>
              <td>相位</td>
              <td>是否启用报警</td>
              <td style="width: 100px;">警报上限</td>
              <td style="width: 100px;">警报下限</td>
              <td>是否启用保护</td>
              <td style="width: 100px;">保护上限</td>
              <td style="width: 100px;">保护下限</td>
            </tr>
            <tr>
              <td></td>
              <td>电压</td>
              <td></td>
              <td></td>
              <td>
                <ElSwitch
                  v-model={state.params.isVoltageLimit}
                  active-value={1}
                  inactive-value={0}
                />
              </td>
              <td>
                <ElInput
                  v-model={state.params.voltageUp}
                  v-slots={{
                    append: () => 'V'
                  }}
                />
              </td>
              <td>
                <ElInput
                  v-model={state.params.voltageDown}
                  v-slots={{
                    append: () => 'V'
                  }}
                />
              </td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td>漏电</td>
              <td></td>
              <td></td>
              <td>
                <ElSwitch v-model={state.params.isLeakage} active-value={1} inactive-value={0} />
              </td>
              <td>
                <ElInput
                  v-model={state.params.leakageUp}
                  v-slots={{
                    append: () => 'V'
                  }}
                />
              </td>
              <td></td>
              <td>
                <ElSwitch
                  v-model={state.params.isLeakageProtect}
                  active-value={1}
                  inactive-value={0}
                />
              </td>
              <td>
                <ElInput
                  v-model={state.params.leakageProtectUp}
                  v-slots={{
                    append: () => 'V'
                  }}
                />
              </td>
              <td></td>
            </tr>
            {state.params.loopItems.map((item: any) => (
              <tbody>
                <tr>
                  <td rowspan={2}>{`K${item.loopNum}`}</td>
                  <td>电流</td>
                  <td>
                    {item.currentItems.map((row: any) => (
                      <div style="height: 30px; line-height: 30px;">
                        {row.lineName === 'hx' && '火线'}
                        {row.lineName === 'lx' && '零线'}
                      </div>
                    ))}
                  </td>
                  <td>
                    {item.currentItems.map((row: any) => (
                      <div style="height: 30px; line-height: 30px;">
                        {row.lineName === 'a' && 'A'}
                        {row.lineName === 'b' && 'B'}
                        {row.lineName === 'c' && 'C'}
                      </div>
                    ))}
                  </td>
                  <td>
                    {item.currentItems.map((row: any) => (
                      <div>
                        <ElSwitch v-model={row.isAlarm} active-value={1} inactive-value={0} />
                      </div>
                    ))}
                  </td>
                  <td>
                    {item.currentItems.map((row: any) => (
                      <div>
                        <ElInput
                          v-model={row.currentUp}
                          disabled={!row.isAlarm}
                          v-slots={{
                            append: () => 'A'
                          }}
                        />
                      </div>
                    ))}
                  </td>
                  <td>
                    {item.currentItems.map((row: any) => (
                      <div>
                        <ElInput
                          v-model={row.currentDown}
                          disabled={!row.isAlarm}
                          v-slots={{
                            append: () => 'A'
                          }}
                        />
                      </div>
                    ))}
                  </td>
                  <td>
                    {item.currentItems.map((row: any) => (
                      <div>
                        <ElSwitch
                          v-model={row.isProtect}
                          disabled
                          active-value={1}
                          inactive-value={0}
                        />
                      </div>
                    ))}
                  </td>
                  <td></td>
                  <td></td>
                </tr>
                <tr>
                  {/* <td>2</td> */}
                  <td colspan={2}>火零不平衡警报阈值</td>
                  {/* <td>2</td> */}
                  <td></td>
                  <td>
                    <ElSwitch v-model={item.isAlarm} active-value={1} inactive-value={0} />
                  </td>
                  <td>
                    <ElInput
                      v-model={item.alarmUp}
                      disabled={!item.isAlarm}
                      v-slots={{
                        append: () => 'A'
                      }}
                    />
                  </td>
                  <td></td>
                  <td>
                    <ElSwitch v-model={item.isProtect} active-value={1} inactive-value={0} />
                  </td>
                  <td>
                    <ElInput
                      v-model={item.protectUp}
                      disabled={!item.isProtect}
                      v-slots={{
                        append: () => 'A'
                      }}
                    />
                  </td>
                  <td></td>
                </tr>
              </tbody>
            ))}
          </table>
        </ElDialog>
      )
    }
  }
})
